<template>
  <div>
    <Swipe 
    class="my-swipe"
    :autoplay="3000"
    :initial-swipe="initialSwipe"
    :width="width"
    :height="height">
      <SwipeItem v-for="(item,index) in  images"
      :key="index">
        <img :src="item" :style="imageStyle"/>
      </SwipeItem>
    </Swipe>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from 'vant';
import 'vant/lib/index.css';
import Vue from "vue";
Vue.use(Swipe);
Vue.use(SwipeItem);

export default {
  data(){
    return{
      
    }
  },
  props:{
    images:{
      type:Array,
      required:true,
      validator:function(array){
        return  array.length!==0;
      }
    },
    autoplay:{
      type:Number||String,
      default:3000
    },
    initialSwipe:{
      type:Number||String,
      default:0
    },
    width:{
      type:String,
      default:'auto'
    },
    height:{
      type:String,
      default:'300px'
    }
  },
  computed:{
    imageStyle:function(){
      return{
        width:'100%',
        height:"300px"
      }
    }
  },
  components:{
    Swipe,
    SwipeItem
  }
}
</script>
